﻿.InstructionsArea
{
    width:640px;            
}
.FielsTdStyle
{
    padding-left:2px;
    padding-right:1px;
}


.FieldTableStyle
{
    width:640px;
    height:378px;
    position:relative;
    background-image: url('Images/MatchInstructions/field.png');
    background-repeat:no-repeat;   
}

.PenaltyTdStyle
{
    border-color:White;
    border-style:solid;
    border-width:thick;
    height:50px;
    width:90px;	        
}

.PlayerNameStyle
{
    font-family:Arial;
    font-size:10px;
    color:Black;
}

.DroppableTextStyle
{
    font-family:Arial;
    font-size:10px;
    color:Black; 
    font-weight:bold;   
} 
.EmptyCaptainSetPiecesStyle
{
    background-image: none;
    border:none;
    
}
.ActiveCaptainStyle
{
    position:absolute;
    top:6px;
    left:6px;
    width:12px;
    height:12px;
    background-image: url('Images/MatchInstructions/captain_a.png');
}
.HoverCaptainStyle
{
    background-color:rgb(127,127,127);    
    background-color:rgba(127,127,127,0.7);    
}
.CaptainDivStyle   
{
    background-image:url('Images/MatchInstructions/captain_c.png');
    background-position:center center;
    background-repeat:no-repeat;
    position:absolute;
    top:6px;
    left:6px;
    width:12px;
    height:12px;
    cursor:move;
}
#MasterCaptainDiv
{
    background-image:url('Images/MatchInstructions/captain_c.png');
    background-position:center center;
    background-repeat:no-repeat;
    width:12px;
    height:12px;
    cursor:move;
}
.SetPiecesTakerDivStyle
{
    background-image:url('Images/MatchInstructions/sp.png');
    background-position:center center;
    background-repeat:no-repeat;
    position:absolute;
    top:18px;
    left:19px;
    width:17px;
    height:12px;
    cursor:move;
}
#MasterSetPiecesDiv
{
    background-image:url('Images/MatchInstructions/sp.png');
    background-position:center center;
    background-repeat:no-repeat;
    width:17px;
    height:12px;
    cursor:move;
}
.ActiveSetPiecesStyle
{
    position:absolute;
    top:18px;
    left:19px;
    width:17px;
    height:12px;
    border:1px solid transparent;
    background-image: url('Images/MatchInstructions/sp_h.png');
}
.HoverSetPiecesStyle
{
    border-color:rgb(127, 127, 127);
    border-color:rgba(127, 127, 127, 0.7);
}

.DroppableDivStyle
{
    width:57px;
    height:57px;
    background-image:url('Images/MatchInstructions/Baloon.png');
    background-position:center center;
    background-repeat:no-repeat;
    background-color:transparent;
    text-align:center;
    border:1px solid transparent;
    position:absolute;
}

.DroppableDivStyleNoBG
{
    width:57px;
    height:57px;
    background-image:none;
    background-position:center center;
    background-repeat:no-repeat;
    background-color:transparent;
    text-align:center;
    border:1px solid transparent;
    position:absolute;
}

.DroppableDivStyle:hover,
.DroppableDivStyleNoBG:hover
{
    background-color:rgb(255,255,255);
    background-color:rgba(255,255,255,0.25);        
}
/** position players on the field **/


#Keeper {top:177px; left:492px;}

#Sub1 {top:310px; left:10px;}
#Sub2 {top:310px; left:70px;}
#Sub3 {top:310px; left:130px;}
#Sub4 {top:310px; left:190px;}
#Sub5 {top:310px; left:250px;}


.PenaltyDroppableDivStyle
{
    width:100%;
    height:100%;
    background-color:Gray;
    border: solid 1px Gray;
    text-align:center;
}
.HoverDroppableStyle
{
    background-image:url('Images/MatchInstructions/Baloon_h.png');
}
.ActiveDroppableStyle
{
    /*background-image:url('Images/MatchInstructions/Baloon_h.png');*/
    background-color:transparent;
    background-color:rgba(255,255,255, 0.3);
}

.PlayersDroppableStyle
{
    border-style:solid;
    border-color:White;
    border-width:thin;
}

.PlayersDroppableActiveStyle
{
    border-color:Lime;
}
.PlayersDroppableHoverStyle
{
    border-color:Black;
}

/* instructions arrows' positioning */
.up_instruction_arrow
{
    position:absolute;
    top:0px;
    left:24px;
    cursor:pointer;
}

.left_instruction_arrow
{
    position:absolute;
    top:8px;
    left:12px;
    cursor:pointer;
}

.right_instruction_arrow
{
    position:absolute;
    top:8px;
    left:36px;
    cursor:pointer;
}
.PreferredActionLabelStyle
{
    font-family:Arial;
    font-size:12px;
    font-weight:bold;
    color:Black;
    cursor:pointer;
    position:absolute;
    top:16px;
    left:22px;
}


.draggableStyle
{
    font-family:Arial;
    font-size:10px;
    color:Black;
    font-weight:bolder;
    background-color:Transparent;
    vertical-align:middle;
    cursor:move;
    white-space:nowrap;
    position:absolute;
    top:-8px;
    width:57px;
    text-align:center;
}

.draggableGridStyle
{
    font-family:Arial;
    font-size:10px;
    color:Black;
    vertical-align:middle;
    padding-top:2px;
    padding-bottom:2px;
    background-color:Transparent;
    height:16px;
    cursor:move;
    z-index:1000;
}  

.draggableGridMouseOverStyle
{
    font-family:Arial;
    font-size:10px;
    color:Black;
    vertical-align:middle;
    padding-top:2px;
    padding-bottom:2px;
    background-color:White;
    height:16px;
    cursor:move;     

}

.draggableGridStyle_drag
{
    font-family:Arial;
    font-size:12px;
    color:Black;
    font-weight:bold;
    padding-top:2px;
    padding-bottom:2px;
    background-color:Transparent;
    height:16px;
    cursor:crosshair;
}

.GridCellStyle
{
    font-family:Arial;
    font-size:10px;
    color:Black;
    vertical-align:middle;
    padding-top:2px;
    padding-bottom:2px;
    background-color:Transparent;
    height:16px;
} 

.DropDownPanelStyle
{
    background-color:White;
    border: solid 1px Black;
    font-family: Arial;
    font-size: 10px;
    visibility:hidden;
    padding:5px;
    width:300px;
}

.NewSubstitutionDivStyle
{
    background-color:#FEFEFE;
    width:100%;
}

.SubstitutionDivStyle
{
    border: solid 1px #F0F0F0;  
    width:100%;
    display:none;
}

.WhenDivStyle
{
    border: solid 1px #F0F0F0;
    padding: 10px;
    text-align:center;
}

.SubstitutionTextBoxStyle
{
    width:30px;
}

.ExistingSubstitutionDivStyle
{
    width:100%;
    border-style:inset;
    border-width: thin;
    border-color:Black;    
}

    
.mainfielddiv
{
    width:650px;   
}    

#master_sp_c_div
{
    position:absolute;
    right:10px;
    top:0px;    
}

.instructions_rotation_attack
{
    transform: rotate(-24deg) skew(37deg, 0deg);
    -ms-transform: rotate(-24deg) skew(37deg, 0deg);/* IE 9 */
    -webkit-transform: rotate(-24deg) skew(37deg, 0deg); /* Safari and Chrome */  
    position:absolute;
    top:42px;
    left:2px;
    
}

.instructions_rotation_mid
{
    transform: rotate(-27deg) skew(37deg, 0deg);
    -ms-transform: rotate(-27deg) skew(37deg, 0deg);/* IE 9 */
    -webkit-transform: rotate(-27deg) skew(37deg, 0deg); /* Safari and Chrome */  
    position:absolute;
    top:42px;
    left:2px;
    
}

.instructions_rotation_def
{
    transform: rotate(-30deg) skew(37deg, 0deg);
    -ms-transform: rotate(-30deg) skew(37deg, 0deg);/* IE 9 */
    -webkit-transform: rotate(-30deg) skew(37deg, 0deg); /* Safari and Chrome */  
    position:absolute;
    top:42px;
    left:2px;
    
}

#DragContainer
{
    width:914px; 
    z-index:0;
}

/********* slider ********/

.ui-slider
{
    position:relative;
}
.ui-slider .ui-slider-handle 
{
    /*background:url('Images/MatchInstructions/slider_handle.png') no-repeat;*/
    background-image:none;
    background-color:#494949;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px ;
    -o-border-radius: 13px ;
    border-radius:13px;
    height:27px;
    width:27px;
    overflow: hidden; 
    position:absolute;
    z-index: 2; 
    cursor:move;
    border-width:0;
    top:-10px;
}
.ui-slider .ui-slider-range
{        
   z-index: 1;
   background-image:none;   
   background-color: #494949;  
   position: absolute;  
   border: 1px solid Black; 
   height: 6px; 
}

.ui-slider-horizontal 
{ 
    background-image:none; 
    background-color:White; 
    border:1px solid black; 
    height: 6px;  
}

.PlayerDragggableClone
{
    height:20px;
    padding:5px 5px 5px 5px;
    background-color:rgb(36,108, 05);
    background-color:rgba(36,108, 05, 0.5);
    display:none;    
}

.mi_titleLabel
{
    font-family:Arial;
    color:#4C4C4C;
    font-size:14px;    
}

.mi_boldDDL
{
    font-family:Arial;
    color:Black;
    font-size:12px;  
    font-weight:bold;
}

.formation_green
{
    font-family:Arial;
    font-size:14px;
    font-weight:bold;   
    color:rgb(0,104,19);     
}

.formation_red
{
    font-family:Arial;
    font-size:14px;
    font-weight:bold;   
    color:Red;  
}

.subinstructions_area
{
    border:1px solid rgb(170,170,170);  
    border:1px solid rgba(170,170,170,0.95);    
    margin-bottom:5px;
}

.green_subinstructionlabel
{
    font-family:Arial;
    font-size:14px;
    color:rgb(0,104,19);  
}
.green_subinstructiontextlabel
{
    font-family:Arial;
    font-size:14px;
    color:#4C4C4C;  
}

.playerdraggablehelper
{
    color:Black;
    font-family:Arial;
    font-size:12px;
    background-color:rgb(153,202,59);
    background-color:rgba(153,202,59,0.7);
    font-weight:bold;    
    white-space:nowrap;
    z-index:10000;
    padding:5px 5px 5px 5px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px ;
    -o-border-radius: 7px ;
    border-radius:7px;
    -moz-box-shadow: 2px 2px 1px rgba(135,180,53,0.7);
    -webkit-box-shadow: 2px 2px 1px  rgba(135,180,53,0.7);
    -o-box-shadow: 2px 2px 1px rgba(135,180,53,0.7);
    box-shadow: 2px 2px 1px rgba(135,180,53,0.7);
}